/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView
} from 'react-native';

import Toast from 'react-native-simple-toast'

import {
    FormStatus,
    FormEvent,
    SubmitBtn,
    DefaultUpload
} from '../../components/Form'
import NavBar from '../../components/NavBarView'

import ManagerService from '../../services/Manager'


let _self;

let validRule = {};

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this.state = {
            formStatus: FormStatus.EDIT,
            form: {
                fk_business_license_id: '',
                legal_person_identity_front_id: '',
                legal_person_identity_behind_id: '',
                fk_business_license_id_imageUrl: '',
                legal_person_identity_front_id_imageUrl: '',
                legal_person_identity_behind_id_imageUrl: ''
            },
            readOnly: false
        };
        const params = this.props.navigation.state.params;
        this.state.readOnly = params.readOnly;
        if(params.readOnly) this.state.formStatus = FormStatus.SUBMITTING;
        this.state.form = {
            ...this.state.form,
            ...params.detail
        };
        validRule = {...params.validRule};
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    async updateImage(uri, loadingStart, loadingEnd, key) {
        let params = {};
        params.uri = uri;
        loadingStart();
        const {result, message, data} = await ManagerService.upload({params});
        loadingEnd();
        if (result) {
            let form = _self.state.form;
            form[key + '_id'] = data && data.id ? data.id : '';
            _self.setState({
                form
            }, () => {
                setTimeout(()=>{
                    _self.setState({
                        formStatus: FormEvent.isCompleted(validRule, _self.state.form)
                    })
                },200)
            })
        } else {
            Toast.show(message);
        }
    }

    async submit() {
        const {result, message} = FormEvent.isValid(validRule, _self.state.form);
        if(result){
            const {result, message} = await ManagerService.imageSubmit({params: _self.state.form});
            if(result) {
                Toast.show("提交成功");
                _self.props.navigation.state.params.refresh();
                setTimeout(()=>{
                    _self.props.navigation.goBack();
                },400);
            }else {
                Toast.show(message);
            }
        }else{
            Toast.show(message);
        }
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar
                    host={this}
                    title="企业证件资料"/>
                <ScrollView style={styles.container}>
                    <View style={[base.columnCC, styles.row]}>
                        <DefaultUpload
                            imageValue={this.state.form.legal_person_identity_front_id_imageUrl}
                            title="上传身份证正面"
                            control={this.state.formStatus}
                            height={layout.height(335)}
                            width={layout.width(500)}
                            placeholderImage={require('../../sources/image_auth_card_1.png')}
                            updateEvent={(uri, loadingStart, loadingEnd) => this.updateImage(uri, loadingStart, loadingEnd, 'legal_person_identity_front')}/>
                        <Text allowFontScaling={false} style={styles.text}>{this.state.readOnly ? '身份证正面' : '上传身份证正面'}</Text>
                    </View>
                    <View style={[base.columnCC, styles.row]}>
                        <DefaultUpload
                            imageValue={this.state.form.legal_person_identity_behind_id_imageUrl}
                            title="上传身份证背面"
                            control={this.state.formStatus}
                            height={layout.height(335)}
                            width={layout.width(500)}
                            placeholderImage={require('../../sources/image_auth_card_2.png')}
                            updateEvent={(uri, loadingStart, loadingEnd) => this.updateImage(uri, loadingStart, loadingEnd, 'legal_person_identity_behind')}/>
                        <Text allowFontScaling={false} style={styles.text}>{this.state.readOnly ? '身份证背面' : '上传身份证背面'}</Text>
                    </View>
                    <View style={[base.columnCC, styles.row]}>
                        <DefaultUpload
                            imageValue={this.state.form.fk_business_license_id_imageUrl}
                            title="上传营业执照"
                            control={this.state.formStatus}
                            height={layout.height(500)}
                            width={layout.width(378)}
                            placeholderImage={require('../../sources/image_auth_licence.png')}
                            updateEvent={(uri, loadingStart, loadingEnd) => this.updateImage(uri, loadingStart, loadingEnd, 'fk_business_license')}/>
                        <Text allowFontScaling={false} style={styles.text}>{this.state.readOnly ? '营业执照' : '上传营业执照'}</Text>
                    </View>
                </ScrollView>
                {
                    this.state.readOnly ?
                        <View/> :
                        <View style={styles.btnBox}>
                            <SubmitBtn
                                style={styles.btn}
                                onPress={() => this.submit()}
                                control={this.state.formStatus}
                                text="保存"/>
                        </View>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: layout.height(60),
        backgroundColor: '#fff'
    },
    row: {
        width: layout.MAX_WIDTH,
    },
    imageLicence: {
        width: layout.width(378),
        height: layout.height(500),
        borderWidth: layout.LINE_WIDTH,
        borderColor: layout.MAIN_BORDER_COLOR_C1,
        borderRadius: layout.width(4)
    },
    imageCard: {
        width: layout.width(500),
        height: layout.height(335),
        borderWidth: layout.LINE_WIDTH,
        borderColor: layout.MAIN_BORDER_COLOR_C1,
        borderRadius: layout.width(4)
    },
    loadingBg: {
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: 'rgba(255,255,255,0.8)',
        opacity: 0
    },
    loadingBox: {
        width: layout.width(90),
        height: layout.height(90)
    },
    loadingBack: {
        width: layout.width(90),
        height: layout.height(90),
        tintColor: layout.MAIN_AUX_COLOR
    },
    loadingFrontBox: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: layout.width(0),
        height: layout.height(90),
        overflow: 'hidden'
    },
    loadingFront: {
        width: layout.width(90),
        height: layout.height(90)
    },
    loading: {
        width: layout.width(90),
        height: layout.height(90)
    },
    text: {
        paddingTop: layout.height(30),
        paddingBottom: layout.height(60),
        fontSize: layout.font(36),
        color: layout.FORM_FONT_COLOR
    },
    btnBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_SMALL,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        backgroundColor: '#fff'
    },
    btn: {
        marginTop: 0,
        height: layout.height(90)
    }
})

//路由
const AuthImage = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AuthImage',
    sign: true
};

export default AuthImage;